<!--  -->
<template>
  <div class="header">
    <section class="container">
      <div class="header_left"><h1>欢迎来到宠物商城</h1></div>
      <div class="header_right">
        <!--v-if="this.$store.state.isLogin"  v-else -->
        <div class="cart-btn" v-if="this.$store.state.isLogin">
          <ul>
            <li @click="$router.push('/mycenter')">
              <img class="avatar_img" :src="header" alt="" />用户名:<span>{{
                username
              }}</span>
            </li>
          </ul>
          <img src="../assets/img/cart.png" alt="" width="20" />
          <span @click="$router.push('/shopcar')">购物车</span>
          <b class="car-number">{{ shopcarNumber }}</b>
          <span class="exit" @click="closeLogin">退出</span>
        </div>
        <div v-else class="btn" @click="openLogin">登 录</div>
      </div>
    </section>
  </div>
</template>

<script>
// import {WeixinLoginApi} from '../axios/api'
import cookie from "js-cookie";
export default {
  name: "Header",
  data() {
    return {
      token: "",
      username: "",
      header: "",
      shopcarNumber: 0,
    };
  },
  created() {
    if (cookie.get("userInfo")) {
      this.shopcarNumber = JSON.parse(cookie.get("shopcarNumber"));
      this.username = JSON.parse(cookie.get("userInfo")).username;
      this.header =
        JSON.parse(cookie.get("userInfo")).header ||
        require("../assets/img/home_head.png");
    }
  },
  computed: {
    monitor() {
      return this.$store.state.userInfo.username;
    },
    monitorheader() {
      return this.$store.state.userInfo.header;
    },
    monitorshopcarnumber() {
      return this.$store.state.shopcarNumber;
    },
    //  getName:()=>{

    // return   this.$store.getters.getUsername
    //  console.log(cookie.get('userInfo'),"ddddddddd")
    //  console.log(JSON.parse(cookie.get('userInfo')).username)
    //    return JSON.parse(cookie.get('userInfo')).username
    //  },
    //  getHeader:()=>{
    //     // return   this.$store.getters.getHeader
    //    return JSON.parse(cookie.get('userInfo')).header   || require('../assets/img/home_head.png')
    //  }
  },
  watch: {
    monitor: function (a) {
      // console.log(a)
      this.username = a;
    },
    monitorheader: function (a) {
      this.header = a;
    },
    monitorshopcarnumber: function (a) {
      this.shopcarNumber = a;
    },
  },
  // created(){
  //   // 将微信扫码的code转换成token
  //   console.log(this.$route.query.code)//从地址栏拿到code，通过调用接口进行转换
  //   // this.showInfo()
  // },
  // mounted(){
  //   console.log(this.$store.getters.getUsername,"ssssss")
  // },
  methods: {
    // 点击登录
    openLogin() {
      // this.$router.push("/login")
      this.$store.commit("showLoginModal");
    },
    // 退出登录
    closeLogin() {
      // console.log("d")
      cookie.set("pet-token", "", { domain: "localhost" });
      cookie.set("userInfo", "", { domain: "localhost" });
      cookie.set("shopcarNumber", "", { domain: "localhost" });
      this.$store.commit("changeIsLogin");
      this.$router.push("/home");
    },
  },
};
</script>
<style lang="less" scoped>
@import "../assets/css/total";
.header {
  position: fixed;
  z-index: 8;
  width: 100%;
  background-color: rgb(56, 54, 54);
  height: 40px;
  color: white;
}
section {
  display: flex;
  justify-content: space-between;
  height: 40px;
  // background-color: pink;
  align-items: center;
  .header_right {
    display: flex;
    align-items: center;
    ul {
      display: flex;
      align-items: center;
      margin-right: 20px;
      li {
        vertical-align: middle;
        margin: 0 20px;
        cursor: pointer;
        .avatar_img {
          width: 40px;
          margin-right: 10px;
          border-radius: 20px;
          vertical-align: middle;
          margin-right: 10px;
        }
      }
    }
    .btn {
      width: 125px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
      background-color: rgb(73, 73, 200);
    }
    .cart-btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 500px;
      height: 40px;
      color: white;
      cursor: pointer;
      span {
        margin: 0 5px;
      }
      .exit {
        margin-left: 50px;
      }
      b {
        width: 22px;
        height: 22px;
        border-radius: 10px;
        background-color: rgba(250, 57, 9, 0.835);
        text-align: center;
        line-height: 22px;
        font-size: 12px;
      }
    }
  }
}
</style>
